<template>
  <div>
    <div>
    <scap id="sp1">傍晚好，ceshi004</scap>
      <br><span id="sp2">丹东市第十九中学</span>
    </div>
    <div class="m_head">
      <div class="nav_item_link">
      </div>
    </div>
    <div class="m_middle">
      <div class="nav_item" style="background-color: lightcoral" @click="orderFood">
        单日订餐
      </div>
      <div class="nav_item" style="background-color: darkorange" @click="orderFood">
        包月订餐
      </div>
     <div class="nav_item" style="background-color: #4a77d4" @click="orderFood">
        缴费
     </div>
    </div>

    <div class="m_bottom">
      <div style="font-size: 20px; font-weight: bold;background-color: #F6F6F6;height: 30px">今日订单</div>
      <div v-for="(item) in orderList" :key="item.id" class="order">
        <div class="title" @click="queryInfo(item.id)">
          {{item.orderType}}
        </div>
        <div class="text">
          <div class="text1">订餐人：{{item.name}}</div>
          <div class="text2">订餐时间：{{item.oederTime}}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "OrderHome",
  data() {
    return {
      orderList: [{
        id: "1",
        name: "张三",
        orderType: "套餐A",
        oederTime: "2020-12-12 12:21"
      },{
        id: "2",
        name: "李四",
        orderType: "套餐B",
        oederTime: "2021-01-12 14:21"
      },{
        id: "2",
        name: "李四",
        orderType: "套餐B",
        oederTime: "2021-01-12 14:21"
      },{
        id: "2",
        name: "李四",
        orderType: "套餐B",
        oederTime: "2021-01-12 14:21"
      },{
        id: "2",
        name: "李四",
        orderType: "套餐B",
        oederTime: "2021-01-12 14:21"
      },{
        id: "2",
        name: "李四",
        orderType: "套餐B",
        oederTime: "2021-01-12 14:21"
      }]
    }
  },
  methods: {
    queryInfo (id) {
      this.$router.replace("/HelloWorld/"+id);
    },
    orderFood () {
      console.log("点餐")
      // this.$router.push("/HelloWorld");
      this.$router.replace("/HelloWorld");
    }
  }
}
</script>

<style scoped>
*{
  margin: 0px;
  padding:0px;
}
.m_head {
  width: 100%;
  height: 20%;
  margin-top: 10px;
  margin-left: -10px;
  background: #F6F6F6;
}
.m_head .nav_item_link {
  width:95%;
  height: 120px;
  text-align: center;
  align-items: center;
  margin-left: 5%;
  background-image:url(../../assets/2.png);
  background-size: 100% 100%;
  border-radius:15px;
}

.m_middle {
  width: 100%;
  height: 200px;
  display: flex;
}
 .nav_item {
  width: 60%;
  height: 35%;
  margin-top: 7%;
  margin-left: 2%;
  background: gold;
  border-radius: 10px;
  text-align: center;
  line-height: 65px;
  font-weight: bold;
  font-size: 15px;
  color: #F6F6F6;
}

.m_bottom {
  height: 10%;
  margin-top: -70px;
  -webkit-overflow-scrolling: touch;
  overflow: scroll;
  background-color: antiquewhite;
}
.order {
  width: 90%;
  margin-left: 5%;
  margin-top: 20px;
  background: #F6F6F6;
  height: 120px;
  border-radius:15px;
}
.order .title {
  font-size: large;
}
.order .text {
  display: flex;
  font-size: small;
}
.text .text2 {
  margin-left: 7%;
}
#sp1{
  font-weight: bold;
  font-size: 20px;
}
#sp2{
  font-size: 12px;
}
</style>
